<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>用户管理</title>
  <link rel="stylesheet" href="/static/assets/libs/layui/css/layui.css"/>
  <link rel="stylesheet" href="/static/assets/module/admin.css?v=318"/>
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <!-- 数据表格 -->
      <table id="Table" lay-filter="Table"></table>
      <div style="margin-top: 20px"></div>
      <blockquote class="layui-elem-quote">注意：该列表数据主要用于客户端任务数据读取 ( 云端控制任务数据，一劳永逸 )</blockquote>
    </div>
  </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="TbBar">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!--添加 编辑 Model-->
<script type="text/html" id="AddEditModel">
  <form id="AddEditForm" lay-filter="AddEditForm" class="layui-form model-form">
    <input name="id" type="hidden"/>
    <div class="layui-form-item">
      <label class="layui-form-label">任务数据:</label>
      <div class="layui-input-block">
        <textarea name="task_data" placeholder="请输入内容" class="layui-textarea" style="height: 400px"></textarea>
      </div>
    </div>
    <div class="layui-form-item text-right">
      <button class="layui-btn" lay-filter="AddEditSubmit" lay-submit>保存</button>
      <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
    </div>
  </form>
</script>
<!-- js部分 -->
<script type="text/javascript" src="/static/assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="/static/assets/js/common.js?v=318"></script>
<script>
  layui.use(['layer', 'form', 'table', 'util', 'admin', 'laydate'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    var admin = layui.admin;
    var laydate = layui.laydate;

    /* 渲染表格 */
    var insTb = table.render({
      elem: '#Table',
      url: "{:url('admin/main/taskList')}",
      page: true,
      limit: 20,
      toolbar: ['<p>',
        '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
        '<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>删除</button>',
        '</p>'].join(''),
      cellMinWidth: 100,
      cols: [[
        {type: 'checkbox'},
        // 表格字段开始
        {type: 'numbers'},
        {field: 'id', title: 'ID', width: 80},
        {field: 'task_data', title: '任务数据'},
        {title: '操作', toolbar: '#TbBar', align: 'center', width: 120}
      ]]
    });

    /* 表格搜索 */
    form.on('submit(TbSearch)', function (data) {
      insTb.reload({where: data.field, page: {curr: 1}});
      return false;
    });

    /* 表格工具条点击事件 */
    table.on('tool(Table)', function (obj) {
      if (obj.event === 'edit') { // 修改
        showEditModel(obj.data)
      } else if (obj.event === 'del') { // 删除
        doDel(obj);
      }
    });

    /* 表格头工具栏点击事件 */
    table.on('toolbar(Table)', function (obj) {
      if (obj.event === 'add') { // 添加
        showEditModel()
      } else if (obj.event === 'del') { // 删除
        var checkRows = table.checkStatus('Table');
        if (checkRows.data.length === 0) {
          layer.msg('请选择要删除的数据', {icon: 2});
          return;
        }
        var ids = checkRows.data.map(function (d) {
          return d.id;
        });
        doDel({ids: ids});
      }
    });

    /* 删除 */
    function doDel(obj) {
      layer.confirm('确定要删除选中数据吗？', {
        skin: 'layui-layer-admin',
        shade: .1,
      }, function (i) {
        layer.close(i);
        var loadIndex = layer.load(2);
        $.get("{:url('admin/main/taskDel')}", {
          id: obj.data ? obj.data.id : '',
          ids: obj.ids ? obj.ids.join(',') : ''
        }, function (res) {
          layer.close(loadIndex);
          if (res.code === 200) {
            layer.msg(res.msg, {icon: 1});
            insTb.reload({page: {curr: 1}});
          } else {
            layer.msg(res.msg, {icon: 2});
          }
        }, 'json');
      });
    }


    function showEditModel(mData) {
      admin.open({
        type: 1,
        title: (mData ? '修改' : '添加') + '任务',
        content: $('#AddEditModel').html(),
        area: '700px',
        offset: 'auto',
        success: function (layero, dIndex) {
          laydate.render({
            elem: '#out_time',
            type: 'datetime'
          });
          // 回显表单数据
          form.val('AddEditForm', mData);
          // 表单提交事件
          form.on('submit(AddEditSubmit)', function (data) {
            var loadIndex = layer.load(2);
            let url = mData ? "{:url('admin/main/taskEdit')}" : "{:url('admin/main/taskAdd')}";
            $.post(url, data.field, function (res) {
              layer.close(loadIndex);
              if (res.code === 200) {
                layer.close(dIndex);
                layer.msg(res.msg, {icon: 1});
                insTb.reload({page: {curr: 1}});
              } else {
                layer.msg(res.msg, {icon: 2});
              }
            }, 'json');
            return false;
          });
          $(layero).children('.layui-layer-content').css('overflow', 'visible');
        }
      });
    }
  });
</script>
</body>
</html>
